<template>
    <div id="updating">
        <!-- <h1>最近更新</h1> -->
        <ul class="infinite-list" v-infinite-scroll="" style="overflow:auto;height:870px">
            <li v-for="(product,index) in updating" class="infinite-list-item" :key="index">
                <!-- <recentUpdateUnit class="unit" :product="product" :rank="index+1"></recentUpdateUnit> -->
                <div id="update-unit">
                    <div class="updateTime">
                        {{product.updateTime}}
                    </div>
                    <div class="content">
                        <div class="image">
                            <img :src="product.picUrl">
                        </div>
                        <div class="block">
                            <div class="info">
                                <div class="name">
                                    <span>{{product.productName}}</span>
                                </div>
                                <div class="price">
                                    <span>{{product.price}}元/斤</span>
                                </div>
                                <div class="bargin">
                                    <span>成交{{product.barginAmount}}元</span>
                                </div>
                            </div>   
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
  
</template>

<script>
export default {
    props:{
        updating:Array
    },
}
</script>

<style lang="less" scoped>

#updating{
    width: 400px;
    .clearfix::after,
    .clearfix::before{
        display: table;
        content: '';
        clear: both;
    }
    h1{
        margin-left: 20px;
    }
    ul::-webkit-scrollbar{
        display: none;
    }
    ul{
        li{
            list-style: none;
            // .unit{
            //     margin-left: -15px;
            //     margin-bottom: 20px;
            // }
            #update-unit{
                width: 350px;
                margin-left: -15px;
                margin-bottom: 20px;
                .updateTime{
                    font-size: 20px;
                    line-height: 35px;
                }
                .content{
                    width: 100%;
                    height: 170px;
                    .image{
                        width: 170px;
                        height: 170px;
                        float: left;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .block{
                        width: 180px;
                        float: left;
                        .info{
                            width: 170px;
                            margin-left: 5px;
                            .name{
                                width: 170px;
                                margin-top: 5px;
                                font-size: 20px;
                                height: 50px;
                                text-align: center;
                                /* background-color: darkorchid; */
                            }
                            .price,
                            .bargin{
                                text-align: center;
                            }
                            span{
                                width: 100%;
                                line-height: 50px;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>